<template>
    <div id="myGuanzhu">
        <Head/>
        <el-row>
            <el-col :span="6" :xs="6" :style="allTabL" class="GuanzhuL">
                <div class="allTab">
                    <el-select v-model="value" placeholder="全部关注">
                        <ul class="isTitle">
                            <el-option v-for="(item, index) in list"
                                       :label="item.title"
                                       :value="item.value"
                                       :key="index">
                                <router-link :to="{ path: item.path }">
                                    {{ item.title }}
                                </router-link>
                            </el-option>
                        </ul>
                    </el-select>
                </div>
                <div class="yd-alltab">
                    <alt1></alt1>
                </div>
            </el-col>
            <el-col :span="17"  :xs="16" :offset="1" class="GuanzhuR">
                <router-view></router-view>
            </el-col>
        </el-row>
        <Footers class="hidden-sm-and-up"/>
    </div>
</template>

<script>
    import Head from "../Head"
    import alt1 from "./allTableft1.vue"
    import Footers from '../Footers'

    export default {
        name: "myGuanzhu",
        data() {
            return {
                list: [
                    {path: "/myGuanzhu", value: '选项1', title: "全部关注"},
                    {path: "/myGuanzhu1", value: '选项2', title: "只看作者"},
                    {path: "/myGuanzhu2", value: '选项3', title: "只看专题"},
                    {path: "/myGuanzhu3", value: '选项4', title: "只看文集"},
                    {path: "/myGuanzhu4", value: '选项5', title: "只看推送更新"}
                ],
                value: '',
                allTabL: {
                    height:'80%',
                    paddingBottom: "15%",
                    borderRight: "1px solid #f0f0f0"
                }
            };
        },
        components: {
            Head,
            alt1,
            Footers
        }
    };
</script>

<style>
    #myGuanzhu {
        width: 60%;
        margin: 0 auto;
        padding-top: 80px;
    }

    .GuanzhuL{
        position: fixed;
        width: 16% !important;
    }
    .GuanzhuR{
        margin-left: 30% !important;
    }
    .allTab {
        border-bottom: 1px solid #f0f0f0;
        font-size: 15px;
    }

    .el-select .el-input__inner {
        font-size: 12.5px;
        padding-left: 0;
        border: none !important;
    }

    .isTitle a {
        display: block;
        text-align: center;
        /*padding: 0px 0 30px 0;*/
        font-size: 14px;
        color: #333333;
    }

    .isTitle li:hover {
        background-color: #c8c8c8;
    }

    @media screen and (max-width: 750px) {
        #myGuanzhu{
            width:90%;
            padding-bottom: 60px;
        }
        .el-select .el-input__inner {
            font-size: 12.5px;
        }
        .yd-alltab{
            margin-left: -10px;
        }
        .el-select{
            margin-left: -1px;
            width: 80px;
        }

        /*mysetting 弹窗*/
        .el-message-box{
            width: 300px !important;
        }
        .el-message-box div>input{
            padding: 10px 20px 10px 30px !important;
        }
        .tnachuanginput{
            padding: 10px 20px 10px 30px !important;
        }
        .tnachuangbtn{
            padding: 5px 10px !important;
            margin-left: -36% !important;
        }
        /*.el-message-box__message p>input{*/
        /*    padding: 10px 20px 10px 30px !important;*/
        /*}*/
        /*.el-message-box__message p>button{*/
        /*    margin-left: -36% !important;*/
        /*}*/
    }
    /*评论页 button*/
    .genghuan .el-col-7 li .el-button{
        border: 0 !important;
        width: 100%;
        height: 100%;
    }
</style>
